<template>
	<el-popover 
		placement="top-start" 
		trigger="manual" 
		popper-class="popper"
		after-enter="unlock"
		v-model="visible">
    <div v-html="itemDetail" @mouseleave="visible=false"
>
    </div>
  	<span class="link-like" slot="reference" :style="{color:itemColor}" 
  		@mouseenter="loadData"
  		>{{itemName}}</span>
	</el-popover>
</template>

<script>
import {itemDetail} from '@/service/api'
import {mapMutations, mapState} from 'vuex'
export default{
	props: {
		itemName: {
			required: true,
			type: String
		},
		itemId: {
			required: true,
			type: String
		},
		itemColor: {
			required: true,
			type: String
		}
	},
	computed: {
		...mapState(['isItemDetailLoading']),
		itemid () {
			return this.itemId.split(':')[0]
		}
	},
	data () {
		return {
			itemDetail:　'',
			visible: false
		}
	},
	methods: {
		...mapMutations(['setItemDetailLoadingState']),
		loadData() {
			if(this.isItemDetailLoading){
				return;
			}

			this.setItemDetailLoadingState({isLoading:true});
			if(this.itemDetail === ''){
				itemDetail({itemId:this.itemid}).then(({data})=>{
					this.itemDetail = data.data;
					this.visible = true;
				})				
			}else{
				this.visible = true;
			}
		},
		unlock() {
			this.setItemDetailLoadingState({isLoading:false});
		}
	}
}
</script>

<style lang="less">
.link-like{
	cursor: pointer;
}
.popper{
	background: none !important;
	.info_box {
		overflow: auto;
		.icon {
	    float: left;
	    width: 64px;
	    height: 64px;
	    margin-right: 10px;
	    background-position: center;
	    background-repeat: no-repeat;
	    position: relative;
		}
		.infos {
	    float: left;
	    max-width: 360px;
	    min-width: 250px;
	    overflow: auto;
	    border-radius: 2px;
	    font-family: "lucida grande", "lucida sans unicode", lucida, helvetica, PingFangSC-Regular, "WenQuanYi Micro Hei", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
	    .item_board {
		    max-width: 380px;
		    min-width: 250px;
		    overflow: auto;
		    padding: 9px;
		    background-color: #080d21;
		    background-image: url(http://wowdb60static.wow-classic.com/assets/sy-69ea138….png);
		    background-repeat: no-repeat;
		    background-position: right bottom;
		    border: 1px solid #888;
		    border-radius: 3px;
		    table {
			    width: 100%;
			    border: 0px;
			    color: #fff;
			    vertical-align: middle;
			    border-collapse: collapse;
	    		border-spacing: 0;
					td {
						font-size: 0.75em;
						padding: 1px 0;
					}
	    		.item_name {
				    font-size: 0.875em;
				    padding-right: 10px;
					}
					.item_id {
				    font-family: Verdana, Arial, sans-serif;
				    font-size: 0.75em;
				    color: #959595;
					}
					.item_level {
						color: #ffca00;
					}
					.item_spell {
				    color: #1eff00;
				    a{
					    color: #1eff00;
						  text-decoration: none;
				    }
				    white-space: normal;
					}
					.itemset {
				    padding-left: 5px;
						a:link {
						  color: #9d9d9d;
						  text-decoration: none;
						}
					}
					.itemset_spell{
						a{
						  color: #9d9d9d;
						  text-decoration: none;						
						}
					}
					.text-right {
				    text-align: right;
				    white-space: nowrap;
					}
				}
			}
		}
		.q0 {
	    color: #9d9d9d;
		}	
		.q4 {
		  color: #a335ee;
		}
		.q9 {
		  color: #ffd100;
		}
		.c128 {
		  color: #68CCEF;
		}
		a {
		  background-color: transparent;
		}
	}
}
</style>